<div class="layui-fluid" id="VIEW-index" lay-title="首页">
    <div class="nepadmin-pad-tb20">
        <h1 class="nepadmin-lead">NepAdmin 后台单页面模板</h1>
        <div class="nepadmin-ignore nepadmin-pad-tb10">
            <p>遵循原生 HTML/CSS/JS 的书写与组织形式，上手容易，拿来即用。</p>
            <p>nepadmin 最低兼容到IE8浏览器。</p>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm4">
                    <div class="nepadmin-linecard">
                        <p class="nepadmin-linecard-title">日成交额</p>
                        <span class="nepadmin-linecard-text">￥229,200</span>
                        <span class="nepadmin-ignore">万元</span>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="nepadmin-linecard nepadmin-br-green">
                        <p class="nepadmin-linecard-title">日新增用户</p>
                        <span class="nepadmin-linecard-text">2468</span>
                        <span class="nepadmin-ignore">人</span>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="nepadmin-linecard nepadmin-br-red">
                        <p class="nepadmin-linecard-title">待处理订单 <a href="#" class="nepadmin-c-blue nepadmin-font-12">立即处理</a></p>
                        <span class="nepadmin-linecard-text">￥229,200</span>
                        <span class="nepadmin-ignore">万元</span>
                    </div>
                </div>
                <div class="layui-col-xs12">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-sm6">
                            <div class="layui-card">
                                <div class="layui-card-header">快捷操作</div>
                                <div class="layui-card-body" style="height: 200px;">
                                    <div class="layui-row" style="margin-top:15px;">
                                        <div class="layui-col-xs3 nepadmin-grid" id="plan">
                                            <span class="layui-icon layui-icon-skin-fill"></span>
                                            <p>工作计划</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid" id="genCode">
                                            <span class="layui-icon layui-icon-notification-fill"></span>
                                            <p>代码生成</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid" id="question">
                                            <span class="layui-icon layui-icon-message-fill"></span>
                                            <p>问卷管理</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid" id="sendSms">
                                            <span class="layui-icon layui-icon-message-fill"></span>
                                            <p>短信发送</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid" id="userLists">
                                            <span class="layui-icon layui-icon-heart-fill"></span>
                                            <p>用户管理</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid" id="taskCheckingList">
                                            <span class="layui-icon layui-icon-setting-fill"></span>
                                            <p>我的待办</p>
                                        </div>
                                        <!--<div class="layui-col-xs3 nepadmin-grid">
                                            <span class="layui-icon layui-icon-star-fill"></span>
                                            <p>网站流量</p>
                                        </div>
                                        <div class="layui-col-xs3 nepadmin-grid">
                                            <span class="layui-icon layui-icon-setting-fill"></span>
                                            <p>网站设置</p>
                                        </div>-->
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm6">
                            <div class="layui-card">
                                <div class="layui-card-header"><span class="layui-icon layui-icon-fire-fill"></span> 最新评论
                                    <a href="javascript:void(0)" class="nepadmin-c-gray nepadmin-font-12 nepadmin-fr" id="sendCircleContent">发表</a>
                                    <!--<a href="#" class="nepadmin-c-gray nepadmin-font-12 nepadmin-fr" style="margin-right:20px;">查看更多</a>-->
                                </div>

                                <div class="layui-card-body" style="height: 210px; padding:5px 0" id="circleContent">
                                    <!--<div class="nepadmin-cell nepadmin-cell-arrow">
                                        <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">
                                            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1736487673,2633075576&fm=26&gp=0.jpg" />
                                        </a>
                                        <div class="nepadmin-cell-title">竹鼠是无辜的 说：<span class="nepadmin-c-gray">大家来看看，这是有多丑。。[照片][照片]</span></div>
                                    </div>
                                    <div class="nepadmin-cell nepadmin-cell-arrow">
                                        <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">
                                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1493370524,4156203431&fm=26&gp=0.jpg" />
                                        </a>
                                        <div class="nepadmin-cell-title">Alex。 说：<span class="nepadmin-c-gray">第一感觉就是很长，价格实惠</span></div>
                                    </div>
                                    <div class="nepadmin-cell nepadmin-cell-arrow">
                                        <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">
                                            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4205845588,1460063116&fm=26&gp=0.jpg" />
                                        </a>
                                        <div class="nepadmin-cell-title">薪火 说：<span class="nepadmin-c-gray">随着包装盒压坏了，但是鼠标垫确实不错，非常细腻的表面</span></div>
                                    </div>
                                    <div class="nepadmin-cell nepadmin-cell-arrow">
                                        <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">
                                            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2085920166,1744212726&fm=26&gp=0.jpg" />
                                        </a>
                                        <div class="nepadmin-cell-title">路见不平一声吼 说：<span class="nepadmin-c-gray">五星，好评！</span></div>
                                    </div>
                                    <div class="nepadmin-cell nepadmin-cell-arrow">
                                        <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">
                                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3662899748,1914720251&fm=26&gp=0.jpg" />
                                        </a>
                                        <div class="nepadmin-cell-title">天泉 说：<span class="nepadmin-c-gray">超值 超值 超值。</span></div>
                                    </div>-->
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-xs12">
                            <div class="layui-card">
                                <!--<div class="layui-card-extra nepadmin-c-gray">
                                    <span class="nepadmin-c-blue">今日</span>&nbsp;&nbsp;
                                    <span>本周</span>&nbsp;&nbsp;
                                    <span>本月</span>&nbsp;&nbsp;
                                    <span>全年</span>&nbsp;&nbsp;
                                </div>-->
                                <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" data-value="1">使用模块</li>
                                        <li data-value="2">使用天</li>
                                    </ul>
                                    <div class="layui-tab-content" style="padding:0;">
                                        <div class="layui-tab-item layui-show">
                                            <div id="index-echartLine" style="width: 100%;height:400px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg4">
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>当前版本</td>
                                <td>v1.0.0</td>
                            </tr>
                            <tr>
                                <td>基于框架</td>
                                <td><script type="text/html" template>layui-v{{ layui.v }}</script></td>
                            </tr>
                            <tr>
                                <td>主要特色</td>
                                <td>单页面 / 响应式 / 简洁</td>
                            </tr>
                            <tr>
                                <td>下载源码</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                        <a href="https://github.com/fanjyy/nep-admin" target="_blank" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe965;</i>GITHUB</a>
                                        <a href="https://gitee.com/june000/nep-admin" target="_blank" class="layui-btn layui-btn-success">GITEE</a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">管理员</div>
                <div class="layui-card-body" id="userList">

                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-notification-fill"></i> 公告动态</div>
                <div class="layui-card-body" id="noticeList">
                    <div class="nepadmin-cell">
                        <div class="nepadmin-cell-title">广州商X一行将于30日莅临公司考察调研</div>
                        <div class="nepadmin-cell-extra">09月14日 10:23:21</div>
                    </div>
                    <div class="nepadmin-cell">
                        <div class="nepadmin-cell-title">关于公司人员的调整</div>
                        <div class="nepadmin-cell-extra">09月14日 12:11:21</div>
                    </div>
                    <div class="nepadmin-cell">
                        <div class="nepadmin-cell-title">10月国庆新活动~，筹备上线</div>
                        <div class="nepadmin-cell-extra">09月14日 13:32:21</div>
                    </div>
                    <div class="nepadmin-cell">
                        <div class="nepadmin-cell-title">转化率统计分析报告</div>
                        <div class="nepadmin-cell-extra">08月10日 16:01:02</div>
                    </div>
                    <div class="nepadmin-cell">
                        <div class="nepadmin-cell-title">客服工作中的话语话术分享</div>
                        <div class="nepadmin-cell-extra">08月10日 15:53:23</div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">服务器监控</div>
                <div class="layui-card-body" id="systemInfo">

                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="user-list-view">
        {{# layui.each(d,function(i,item){ }}
            {{#  if(item.status == 1){ }}
                <a lay-href="/" class="nepadmin-avatar nepadmin-mar-r20" >
            {{#  } else { }}
                <a lay-href="/" class="nepadmin-avatar nepadmin-mar-r20 nepadmin-gray" >
            {{# } }}
                <img src="{{item.headLogo}}" />
            </a>
        {{# }); }}
    </script>

    <script type="text/html" id="system-info-view">
        <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10">{{ d.cpuLoad }}%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">CPU使用率</span></h2>
            <div class="layui-progress">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="{{ d.cpuLoad }}%"></div>
            </div>
        </div>
        <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10">{{ d.memoryLoad }}%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">内存占用率</span></h2>
            <div class="layui-progress">
                <div class="layui-progress-bar layui-bg-red" lay-percent="{{ d.memoryLoad }}%"></div>
            </div>
        </div>

    </script>

    <script type="text/html" id="TPL-index-params">
        {{# layui.each(d.params,function(i,item){ }}
        <span class="layui-badge-rim">{{ item.val }}</span>
        {{# }) }}
    </script>
    <script type="text/html" id="TPL-index-status">
        {{#
            var status = {
                WAIT_PAY:{title:'待付款',color:'blue'},
                WAIT_DELIVER:{title:'待发货',color:'orange'},
                WAIT_REFUND:{title:'待退款',color:'red'},
            }[d.status];
        }}
        <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
    </script>
</div>

<script>
    layui.use(['admin', 'echarts', 'tiows','element', 'helper', 'table', 'layim','util','laytpl','im'], function () {
        var $ = layui.jquery
                , admin = layui.admin
                , echarts = layui.echarts
                , element = layui.element
                , helper = layui.helper
                , table = layui.table
                , util = layui.util
                , laytpl = layui.laytpl;
        var tio = layui.tiows;
        var view = $('#VIEW-chart-index');
        var layim = layui.layim;
        var im = layui.im;
        var userInfo = layui.admin.data()['user'];
        //基础配置
        var friendArr = [];
        admin.get({
            type: 'get',
            url: '/chat/friends/list',
            dataType: 'json',
            async:false,
            success: function(res){
                friendArr = res.data;
            }
        });
        var groupArr = [];
        admin.get({
            type: 'get',
            url: '/chat/groupsUser/list',
            dataType: 'json',
            async:false,
            success: function(res){
                groupArr = res.data;
            }
        });

        // 检查token是否有值,没有直接返回
        if (!admin.getLoginToken()){
            return false;
        }

        layim.config({
            //初始化接口
            /*init: {
                url: 'http://192.168.1.190:8080/js/getList.json'
                ,data: {}
            }*/
            //或采用以下方式初始化接口
             init: {
             mine: {
             "username": userInfo.userName //我的昵称
             ,"id": userInfo.id //我的ID
             ,"status": "online" //在线状态 online：在线、hide：隐身
             ,"remark": userInfo.remark //我的签名
             ,"avatar": userInfo.headLogo //我的头像
             }
             ,friend: friendArr
             ,group: groupArr
             }

            //查看群员接口
            ,members: {
                url: 'http://192.168.1.190:8080/js/getMembers.json'
                ,data: {}
            }

            //上传图片接口
            ,uploadImage: {
                url: '/upload/image' //（返回的数据格式见下文）
                ,type: '' //默认post
            }

            //上传文件接口
            ,uploadFile: {
                url: '/upload/file' //（返回的数据格式见下文）
                ,type: '' //默认post
            }
            /*//扩展工具栏
            ,tool: [{
                alias: 'code'
                ,title: '代码'
                ,icon: '&#xe64e;'
            }]*/
            //,brief: true //是否简约模式（若开启则不显示主面板）
            //,title: 'WebIM' //自定义主面板最小化时的标题
            //,right: '100px' //主面板相对浏览器右侧距离
            //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
            ,initSkin: '5.jpg' //1-5 设置初始背景
            //,skin: ['aaa.jpg'] //新增皮肤
            //,isfriend: false //是否开启好友
            //,isgroup: false //是否开启群组
            //,min: true //是否始终最小化主面板，默认false
            ,notice: true //是否开启桌面消息提醒，默认false
            //,voice: false //声音提醒，默认开启，声音文件为：default.wav

            ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
            ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可

        });

        // 获取所有登录人
        admin.get({
            type: 'get',
            url: '/sysUser/list',
            dataType: 'json',
            success: function(data){
                if(data.code == '0') {
                    var getTpl = $("#user-list-view").html();
                    laytpl(getTpl).render(data.sysUserList, function (html) {
                        document.getElementById('userList').innerHTML = html;
                    });
                }
            }
        });
        // 获取服务器信息
        admin.get({
            type: 'get',
            url: '/sysUser/systemInfo',
            dataType: 'json',
            success: function(data){
                //console.log(data)
                if(data.code == '0'){
                    var getTpl = $("#system-info-view").html();
                    laytpl(getTpl).render(data, function(html){
                        document.getElementById('systemInfo').innerHTML = html;
                    });
                    element.render('progress');
                }

            }
        });
        $("#plan").on("click",function () {
            var href = '#/detail/plan';
            admin.navigate(href)
        });
        $("#genCode").on("click",function () {
            var href = '#/gen/tableList';
            admin.navigate(href)
        });
        $("#question").on("click",function () {
            var href = '#/question/questionList';
            admin.navigate(href)
        });
        $("#sendSms").on("click",function () {
            var href = '#/sys/sms/sysSendSmsList';
            admin.navigate(href)
        });
        $("#userLists").on("click",function () {
            var href = '#/sys/user/sysUserList';
            admin.navigate(href)
        });
        $("#taskCheckingList").on("click",function () {
            var href = '#/oa/taskCheckingList';
            admin.navigate(href)
        });

        var ws_protocol = 'ws'; // ws 或 wss
        var ip = 'localhost'
        var port = 9090
        var heartbeatTimeout = 50000; // 心跳超时时间，单位：毫秒
        var reconnInterval = 10000; // 重连间隔时间，单位：毫秒
        var binaryType = 'arraybuffer'; // 'blob' or 'arraybuffer';//arraybuffer是字节
        var handler = new function () {
            this.onopen = function (event, ws) {
                // ws.send('hello 连上了哦')
                // document.getElementById('contentId').innerHTML += 'hello 连上了哦<br>';
                console.log("hello 连上了哦");
                var sendContent = {token:admin.getLoginToken(),circleContentId:""};
                ws.send(JSON.stringify(sendContent))
            };

            /**
             * 收到服务器发来的消息
             * @param {*} event
             * @param {*} ws
             */
            this.onmessage = function (event, ws) {
                var data = event.data
                // document.getElementById('contentId').innerHTML += data + '<br>'
                //console.log(data);
                var str ='';
                var data = eval('(' + data + ')');
                if(data != null && data.length > 0){
                    for(var i=0;i<data.length;i++){
                        var circleContent=data[i];
                        str+='<div class="nepadmin-cell nepadmin-cell-arrow">\
                            <a lay-href="/" class="nepadmin-avatar nepadmin-avatar-xs" title="在线">\
                            <img src="'+circleContent.createHeadLogo+'" />\
                            </a>\
                            <div class="nepadmin-cell-title">'+circleContent.createName+' 说：<span class="nepadmin-c-gray">'+circleContent.content+'</span></div>\
                        </div>';
                    }
                }
                $("#circleContent").html(str);
            }

            this.onclose = function (e, ws) {
                // error(e, ws)
            }

            this.onerror = function (e, ws) {
                // error(e, ws)
            }

            /**
             * 发送心跳，本框架会自动定时调用该方法，请在该方法中发送心跳
             * @param {*} ws
             */
            this.ping = function (ws) {
                console.log("发心跳了")
                var circleContentId = $("#circleContent div:nth-child(1)").attr("data-id");
                if(!circleContentId){
                    circleContentId="";
                }
                var sendContent = {token:admin.getLoginToken(),circleContentId:circleContentId};
                console.log(sendContent);
                ws.send(JSON.stringify(sendContent))
            }
        };

        //var queryString = 'token='+admin.getLoginToken();
        var queryString = '';
        var param = null
        var tiows = new tio.ws(ws_protocol, ip, port, queryString, param, handler, heartbeatTimeout, reconnInterval, binaryType)
        tiows.connect()

        // 聊天室
        im.config({
            ip:ip,
            port:port,
            layim: layim
        });

        // 监听机制
        $("#sendCircleContent").on("click",function(){
            // 弹窗式发布
            var index = layer.open({
                type: 1,
                title:'添加',
                area: ['400px', 'auto'], //宽高
                btn:['确定','取消'],
                content: '<div style="height: 145px;padding: 15px !important;">'+
                '<form class="layui-form" action="">'+
                '<div class="layui-form-item layui-form-text" >'+
                ' <textarea type="text" class="layui-textarea" id="content" name="content" autocomplete="off" placeholder="请输入内容" ></textarea>'+
                '</div>'+
                '</form>'+
                '</div>'
                ,success:function(){

                }
                ,yes:function (){
                    //调用添加/编辑标注方法
                    var circleContent = {};
                    circleContent.content = $("#content").val();
                    admin.post({
                        url:"/cms/circle/content/save",
                        contentType: "application/json",
                        data:JSON.stringify(circleContent),
                        success:function(res){
                            if (res.code == 0){
                                // 提醒保存成功，立即发送send
                                var circleContentId = $("#circleContent div:nth-child(1)").attr("data-id");
                                if(!circleContentId){
                                    circleContentId="";
                                }
                                var sendContent = {token:admin.getLoginToken(),circleContentId:circleContentId};
                                tiows.send(JSON.stringify(sendContent))
                                layer.msg(res.msg);
                                layer.closeAll();
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    });
                }
                ,btn2: function(index, layero){
                    // 清除值
                }
            });

        });
        // 进入
        element.render('progress');

        element.on('tab(index-chart)', function(data){
            // 根据值切换
            var value=$(this).attr("data-value");
            if (value=="1"){
                admin.get({
                    type: 'get',
                    url: '/sysLog/count',
                    dataType: 'json',
                    success: function(data){
                        if(data.code == '0') {
                            createChart(data.sysLogList);
                        }
                    }
                });
            }else{
                admin.get({
                    type: 'get',
                    url: '/sysLog/countDate',
                    dataType: 'json',
                    success: function(data){
                        if(data.code == '0') {
                            createChart(data.sysLogList);
                        }
                    }
                });
            }
        });

        admin.get({
            type: 'get',
            url: '/sysLog/count',
            dataType: 'json',
            success: function(data){
                if(data.code == '0') {
                    createChart(data.sysLogList);
                }
            }
        });

        function createChart(data) {
            var seriesData = [];
            var xAxisData = [];
            if (data != null && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var sysLog = data[i];
                    seriesData.push(sysLog.useNum);
                    if(sysLog.dateStr != null && sysLog.dateStr != ""){
                        xAxisData.push(sysLog.dateStr);
                    }else{
                        xAxisData.push(sysLog.operation);
                    }
                }
            }

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'cross'}
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    max: function (val) {
                        return val.max + 400;
                    },
                    min: function (val) {
                        return val.min - 400;
                    },
                    type: 'value',
                    axisLabel: {formatter: '{value}'},
                    axisPointer: {snap: true}
                },
                series: [{
                    name: '使用次数',
                    type: 'line',
                    symbolSize: 12,
                    lineStyle: {
                        normal: {
                            width: 5,
                            shadowColor: '#5a8bff',
                            shadowBlur: 40,
                            shadowOffsetY: 10
                        }
                    },
                    data: seriesData
                }]
            };
            echarts.init(document.getElementById('index-echartLine'), 'blue').setOption(option);
        }
    })
</script>